import React from 'react';
import { Card, Row, Col, Space } from 'antd';
import { InfoCircleOutlined } from '@ant-design/icons';

const LabelItem = ({ label, value, required, tooltip }) => (
  <div style={{ display: 'flex', alignItems: 'center', fontSize: '12px' }}>
    <div style={{ 
      marginRight: '8px', 
      color: 'rgba(0, 0, 0, 0.85)',
      whiteSpace: 'nowrap' 
    }}>
      {required && <span style={{ color: '#ff4d4f', marginRight: '4px' }}>*</span>}
      {label}
      {tooltip && (
        <InfoCircleOutlined style={{ marginLeft: '4px', color: '#999' }} />
      )}
    </div>
    <div style={{ 
      color: 'rgba(0, 0, 0, 0.65)',
      backgroundColor: '#f5f5f5',
      padding: '4px 8px',
      borderRadius: '2px',
      flex: 1,
      minWidth: '180px'
    }}>
      {value || '从产品信息获取'}
    </div>
  </div>
);

const TodoDetail = ({ data }) => {
  const headerData = {
    projectId: 'XXXX',
    projectName: 'XXXX',
    projectApproval: '项目释放审批66',
    productCode: data?.productInfo?.code,
    productName: data?.productInfo?.name,
    productEnName: data?.productInfo?.enName,
    productShortName: data?.productInfo?.shortName,
    categoryCode: data?.productInfo?.categoryCode,
    categoryName: data?.productInfo?.categoryName,
    materialType: data?.productInfo?.materialType,
    brand: data?.productInfo?.brand,
  };

  return (
    <Card style={{ marginBottom: '16px' }}>
      <Row>
        <Col span={24} style={{ marginBottom: '16px' }}>
          <div style={{ 
            fontSize: '14px', 
            fontWeight: 'bold',
            borderBottom: '1px solid #f0f0f0',
            paddingBottom: '8px',
            marginBottom: '16px'
          }}>
            {headerData.projectId} {headerData.projectName} {headerData.projectApproval}
          </div>
        </Col>
      </Row>
      <Row gutter={[16, 16]}>
        <Col span={6}>
          <LabelItem 
            label="商品编码"
            value={headerData.productCode}
            required
            tooltip
          />
        </Col>
        <Col span={6}>
          <LabelItem 
            label="商品名称"
            value={headerData.productName}
            required
            tooltip
          />
        </Col>
        <Col span={6}>
          <LabelItem 
            label="商品英文名称"
            value={headerData.productEnName}
            required
            tooltip
          />
        </Col>
        <Col span={6}>
          <LabelItem 
            label="商品简称"
            value={headerData.productShortName}
            tooltip
          />
        </Col>
        <Col span={6}>
          <LabelItem 
            label="后台类目编码"
            value={headerData.categoryCode}
            required
            tooltip
          />
        </Col>
        <Col span={6}>
          <LabelItem 
            label="后台类目名称"
            value={headerData.categoryName}
            required
            tooltip
          />
        </Col>
        <Col span={6}>
          <LabelItem 
            label="物料类型"
            value={headerData.materialType}
            tooltip
          />
        </Col>
        <Col span={6}>
          <LabelItem 
            label="品牌"
            value={headerData.brand}
            required
            tooltip
          />
        </Col>
      </Row>
    </Card>
  );
};

export default TodoDetail;
